<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">

        <box @func="loadComments"></box>

        <ul class="list-group">

            <li class="list-group-item" v-for="(item, index) in list" :key="item.id">
                <span class="badge">评论人: {{ item.user }}</span>
                {{ item.content }}
            </li>

        </ul>


    </div>

    <template id="tmpl">
        <div>

            <div class="form-group">
                <label>
                    评论人

                    <input type="text" class="form-control" v-model="user">

                </label>
            </div>

            <div class="form-group">
                <label>
                    评论内容
                    <textarea class="form-control" v-model="content"></textarea>

                </label>
            </div>


            <div class="form-group">
               <button @click="add">发表</button>
            </div>
        </div>
    </template>


    <script>
        var commentBox = {
            data() {
                return {
                    user: '',
                    content: ''
                }
            },
            template: '#tmpl',
            methods: {
                add() {
                    var comment = {id: Date.now(), user: this.user, content: this.content}
                    // 从localStorage中 获取所有的评论 
                   var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                   list.unshift(comment)
                //    重新保存 最新的数据
                   localStorage.setItem('cmts', JSON.stringify(list))
                   this.user = this.content = ''

                   this.$emit('func')
                   
                   
                }
            },
        }

        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                        id: Date.now(),
                        user: '礼拜',
                        content: '天生我材必有用'
                    },
                    {
                        id: Date.now(),
                        user: '礼拜1',
                        content: '天生我材必有用1'
                    },
                    {
                        id: Date.now(),
                        user: '礼拜2',
                        content: '天生我材必有用2'
                    }
                ]
            },
            created(){
              this.loadComments()
            },
            methods: {
                loadComments() {
                    // 从本地的loaclstorage中 加载评论列表
                    var list = JSON.parse(localStorage.getItem('cmts') || '[]')
                    this.list = list
                }
            },
           
            

            components: {
                'box': commentBox
            }
        })
    </script>
</body>

</html>